<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>讲座</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <link rel="stylesheet" type="text/css" href="../style/mui.min.css" />
    <style>
        #closeIt {
            position: absolute;
            top: 35px;
            left: 1rem;
            width: 2rem;
            height: 2rem;
        }

        main {
            padding-top: 75px;
            border-top: 1px solid #ccc;
        }

        .lectureDetail {
            margin: 1rem 0;
        }

        .lectureItem {
            width: 95%;
            padding: 1.5rem;
            margin: auto;
            background-color: #fff;
            border-radius: 0.4rem;
            border-bottom: 2px solid #3949AB;
        }

        .lectureItem span {
            font-size: 1rem;
        }
        .lectureItem span:nth-child(1) {
            font-weight: bold;
            color: #3949AB;
        }

        .lectureItem p {
            color: #999;
            margin: 0.5rem 0;
            line-height: 1.5;
        }

        .itemTitle {
            position: relative;
        }

        .itemTitle img {
            position: absolute;
            top: 0;
            right: 0;
            width: 3rem;
            height: 3rem;
        }

        .reservation {
            width: 95%;
            margin: 1rem auto;
            padding: 1rem;
            color: orange;
            text-align: center;
            border-radius: 0.4rem;
            background-color: #3949AB;
        }
    </style>
</head>

<body>
    <header>
        讲座详情
        <img src="../img/icons/back.png" alt="" onclick="api.closeWin()" id="closeIt">
    </header>
    <main>
        <div class="lectureDetail">

        </div>
    </main>
</body>
<script type="text/template" id="detail">
    {{~it.items:value:index}}
    <div class="lectureItem itemTitle">
        <span>讲座名：</span>
        <span>{{=value.lecture_name}}</span>
        <img src="../img/icons/Audited.png" alt="">
    </div>
    <div class="lectureItem">
        <span>时间：</span>
        <span>{{=value.lecture_time}}</span>
    </div>
    <div class="lectureItem">
        <span>地点：</span>
        <span>{{=value.lecture_address}}</span>
    </div>
    <div class="lectureItem">
        <span>主题：</span>
        <p>{{=value.lecture_txt}}</p>
    </div>
    <div class="lectureItem">
        <span>讲师：</span>
        <span>{{=value.lecture_teacher}}</span>
    </div>
    {{? value.lecture_reservation == '0'}}
    <div class="reservation">预约</div>
    {{?? }}
    <div class="reservation">已预约</div>
    {{?}}
    {{~}}
</script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/rend.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        getThisDetail();
    };

    function getThisDetail() {
        api.ajax({
            url: 'http://114.116.243.15/newbtb/appinfo/lectureDetail.lecture',
            method: 'post',
            data: {
                body: {
                    'tbname': 'lecture_activity',
                    'id': api.pageParam.id
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.status == 1) {
                    $('.lectureDetail').html(btbRender('detail', [ret.data]));
                    $('.reservation').click(function() {
                        const _this = this;
                        if ($api.getStorage('username')) {
                            if($(_this).text() == '已预约') {
                                api.toast({
                                    msg: '您已经预约过了，请勿重复操作',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                $(_this).unbind("click");
                                return
                            }
                            var btnArray = ['取消', '确定'];
                            mui.prompt('请输入您的手机号以便后续与您联系', '如：18888888888', '预约', btnArray, function(e) {
                                if (e.index == 1) {
                                    if(!(e.value) || $.trim(e.value).length == 0 || !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(e.value))) {
                                        api.toast({
                                            msg: '请输入正确手机号',
                                            duration: 2000,
                                            location: 'bottom'
                                        });
                                    }
                                    else {
                                      api.ajax({
                                          url: 'http://114.116.243.15/newbtb/appinfo/update.lecture',
                                          method: 'post',
                                          data: {
                                            body: {
                                                'tbname': 'lecture_activity',
                                                'id': api.pageParam.id,
                                                'lecture_reservation': 1
                                            }
                                          }
                                      },function(ret, err){
                                          if (ret) {
                                              if(ret.status == 1) {
                                                  api.toast({
                                                      msg: '预约成功',
                                                      duration: 2000,
                                                      location: 'bottom'
                                                  });
                                                  $(_this).text('已预约');
                                                  $(_this).unbind("click");
                                              }
                                          }
                                      });
                                    }
                                } else {
                                    api.toast({
                                        msg: '取消操作',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                            })
                        } else {
                            api.openWin({
                                name: 'login',
                                url: './btb-login.html',
                            });
                        }
                    })
                }
            }
        });
    }
</script>

</html>
